<template>
    <el-row class="header_login" justify="space-between">
        <el-image style="width: auto; height: auto;" :src=imgUrl fit="none" @click="back" />
        <el-text style="color: white;font-size: xx-large; background-color: #fbaf5a;">
            登陆
        </el-text>
    </el-row>
    <el-main class="login_body">
        <el-row justify="end">
            <el-link :underline="false" @click="register">没有账号？立即注册</el-link>
        </el-row>
        <el-row type="flex" justify="center" style="align-content: center;height: 80%;">
            <el-col class="login_css" :span="10">
                <el-row type="flex" justify="center" class="login_content_css" align="middle">
                    <el-col :span="16">
                        <el-col style="width: 100%;" :span="24">
                            <el-row type="flex" justify="center" style="width: 100%;" align="middle">
                                <el-text style="font-size: xx-large; font-weight: bold; text-align: center;">
                                    登录跳蚤市场
                                </el-text>
                            </el-row>
                        </el-col>
                        <el-col style="margin-top: 10%;" :span="24">
                            <el-text style="font-size: large;">
                                手机号码
                            </el-text>
                        </el-col>
                        <el-col style="margin-top: 2%;" :span="24">
                            <el-input v-model="phoneNum" maxlength="11" style="height: 40px;" />
                        </el-col>
                        <el-col style="margin-top: 3%;" :span="24">
                            <el-text style="font-size: large;">
                                短信验证码
                            </el-text>
                        </el-col>
                        <el-col style="margin-top: 2%;" :span="24">
                            <el-row type="flex" justify="space-between" align="middle">
                                <el-input style="width: 60%; height: 40px;" v-model="verifyCode" maxlength="6" />
                                <el-button v-model:disabled="isEnable"
                                    style="width: 35%; height: 40px;background-color: #fbaf5a;color: white;font-size: large;"
                                    @click="getCodeClick">
                                    {{ getVerifyCode }}
                                </el-button>
                            </el-row>
                        </el-col>
                        <el-col :span="24" style="margin-top: 15%;">
                            <el-row align="middle" justify="center" type="flex">
                                <el-button
                                    style="width: 200px;height: 40px; background-color: #fbaf5a; color: white;font-size: large;"
                                    @click="authClick">
                                    登入
                                </el-button>
                            </el-row>
                        </el-col>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-main>
</template>


<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { agcAuth } from '../assets/agc/auth.ts';
import { imgUrl } from '../assets/common/constants.ts';
import { useRouter } from 'vue-router';
import { queryUser } from '../assets/net/NetUtils.ts';
import { userInfoStore } from '../assets/userStore/userStore.ts';
import { UserModel } from '../assets/model/User.ts';

const userStore = userInfoStore()
const router = useRouter();
const isEnable = ref<boolean>(false)
const getVerifyCode = ref<string>('获取验证码')
const phoneNum = ref<string>()
const verifyCode = ref<string>()
const countdownSeconds = ref<number>(60)
let intervalId: any = -1

const back = () => {
    router.back()
}

const register = () => {
    router.push('/register')
}

const getCodeClick = () => {
    if (phoneNum.value) {
        queryUser(phoneNum.value)
            .then((value) => {
                if (value) {
                    agcAuth.getVerifyCode(phoneNum.value!)
                        .then(() => {
                            isEnable.value = true
                            intervalId = setInterval(() => {
                                countdownSeconds.value--
                                getVerifyCode.value = `${countdownSeconds.value}s`
                                console.log(countdownSeconds);
                                if (0 === countdownSeconds.value) {
                                    clearInterval(intervalId)
                                    isEnable.value = false
                                    countdownSeconds.value = 60
                                    getVerifyCode.value = '获取验证码'
                                }
                            }, 1000)
                        })
                }
            })
            .catch(()=>{
                ElMessage.error('该手机号码未被注册！')
            })
    } else {
        ElMessage.error('手机号码不能为空！')
    }

}

const authClick = () => {
    if (phoneNum.value === "") {
        ElMessage({
            message: '手机号码不能为空！',
            type: 'warning',
        })
    } else if (verifyCode.value === "") {
        ElMessage({
            message: '验证码不能为空！',
            type: 'warning',
        })
    } else {
        agcAuth.loginByVerifyCode(phoneNum.value!, verifyCode.value!)
            .then((_reslut) => {
                clearInterval(intervalId);
                isEnable.value = true;
                queryUser(phoneNum.value!)
                    .then((value: UserModel) => {
                        userStore.update(value.uid, value.username, value.phoneNumber, value.image?.url)
                        router.push({
                            path: "/"
                        });
                    })
            })
    }
}


</script>
<style>
.login_body {
    position: absolute;
    height: 100%;
    width: 100%;
}

.header_login {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>letlet